<!--
 * @Author: 极客James
 * @Motto: 求知若渴,虚心若愚
 * @Github: https://github.com/Geek-James/ddBuy
 * @掘金: https://juejin.im/user/5c4ebc72e51d4511dc7306ce
 * @LastEditTime: 2019-11-14 14:12:01
 * @Description: 回到顶部组件
 * @FilePath: /ddBuy/src/components/backToTop/ToTop.vue
 -->
<template>
  <div class="scrollTop"
       v-show="showTop"
       @click="toTop">
    <svg t="1573115175555"
         class="icon"
         viewBox="0 0 1024 1024"
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         p-id="2853"
         width="64"
         height="64">
      <path d="M684.4 416.9s23.5 11.8 32 32.6v128.2c8.7 20.9 102.9 43.3 113 63.6v128.2H641s-69 32.3-132.1 32.3h3.7c-63.1 0-132.1-32.3-132.1-32.3H192V641.3c10-20.3 106.7-42.7 115.4-63.6V449.5c8.6-20.8 28.3-28.8 28.3-28.8"
            fill="#29A3EC"
            p-id="2854"></path>
      <path d="M512.6 811.8h-3.7c-0.4 0-0.7 0-1.1-0.1-57.7-1.4-117.5-26.9-129.5-32.2H192c-5.5 0-10-4.5-10-10V641.3c0-1.5 0.4-3 1-4.4 6.3-12.8 27.7-21.9 62.1-35.9 13-5.3 26.4-10.7 36.7-15.9 10.3-5.2 14.2-8.6 15.6-10.2V449.5c0-1.3 0.3-2.6 0.8-3.8 10.1-24.4 32.8-33.9 33.8-34.2 5.1-2.1 10.9 0.4 13 5.5 2.1 5.1-0.4 10.9-5.5 13-0.1 0-14.9 6.4-22.1 21.6v126.1c0 1.3-0.3 2.6-0.8 3.8-5.7 13.8-28.1 23.4-64 38-12.6 5.1-25.6 10.4-35.6 15.4-9.5 4.8-13.4 7.9-15 9.5v115.1h178.5c1.5 0 2.9 0.3 4.2 0.9 0.7 0.3 66.4 30.7 126 31.3 59.6-0.6 125.3-31 126-31.3 1.3-0.6 2.8-0.9 4.2-0.9h178.4V644.4c-1.6-1.6-5.5-4.8-14.7-9.5-9.8-5-22.5-10.3-34.8-15.4-35.2-14.6-57-24.2-62.7-38-0.5-1.2-0.8-2.5-0.8-3.8V451.6c-7.5-15.9-26.3-25.7-26.5-25.8-4.9-2.5-6.9-8.5-4.4-13.4s8.5-6.9 13.4-4.4c1.1 0.6 27 13.8 36.8 37.8 0.5 1.2 0.7 2.5 0.7 3.8V575c1.4 1.6 5.2 4.9 15.2 10.1 10.1 5.2 23.3 10.7 36 16 33.6 13.9 54.5 23.1 60.8 35.8 0.7 1.4 1 2.9 1 4.5v128.2c0 5.5-4.5 10-10 10H643.2c-12 5.4-71.8 30.9-129.5 32.2h-1.1z"
            fill="#5A3392"
            p-id="2855"></path>
      <path d="M651 453.9s19 9.3 25.9 25.8v101.5c7.1 16.5 83.1 34.3 91.3 50.4v101.5H616s-55.8 25.6-106.8 25.6h3c-51 0-106.8-25.6-106.8-25.6H253.3V631.6c8.1-16.1 86.2-33.8 93.2-50.4V479.7c6.9-16.5 22.8-22.8 22.8-22.8"
            fill="#3CDEF6"
            p-id="2856"></path>
      <path d="M384.5 646.7V290.2c0-45.5 81.9-180 127.4-180s127.4 134.5 127.4 180v356.5H384.5"
            fill="#EE746C"
            p-id="2857"></path>
      <path d="M639.3 656.7H384.5c-5.5 0-10-4.5-10-10V290.2c0-27.6 24.3-76.5 48.3-112.6 19.2-28.9 56.4-77.4 89.1-77.4 32.7 0 69.9 48.5 89.1 77.4 24 36.1 48.3 85 48.3 112.6v356.5c0 5.5-4.5 10-10 10z m-244.8-20h234.8V290.2c0-19.7-18.9-62.4-45-101.5-27.3-41-56.4-68.5-72.4-68.5s-45.2 27.5-72.4 68.5c-26.1 39.1-45 81.8-45 101.5v346.5z"
            fill="#5A3392"
            p-id="2858"></path>
      <path d="M635.6 290.2c0-45.5-81.9-180-127.4-180s-123.4 134.5-123.4 180h250.8z"
            fill="#FFFFFF"
            p-id="2859"></path>
      <path d="M635.6 300.2H384.8c-5.5 0-10-4.5-10-10 0-27.8 23.2-76.5 46.2-112.5 13.8-21.5 28.2-39.8 41.7-53 16.8-16.3 32.1-24.6 45.4-24.6 13.4 0 28.8 8.2 46 24.5 13.9 13.2 28.8 31.5 43.1 52.9 24 36.1 48.3 85 48.3 112.6 0.1 5.6-4.4 10.1-9.9 10.1z m-239.7-20h228.5c-4.5-22.1-21.5-58.1-43.8-91.5-27.3-41-56.4-68.5-72.4-68.5-16.2 0-43.8 26.8-70.3 68.3-21.4 33.4-37.7 69.5-42 91.7z"
            fill="#5A3392"
            p-id="2860"></path>
      <path d="M417.9 322.7h188V613h-188z"
            fill="#FB9761"
            p-id="2861"></path>
      <path d="M511.9 768.7c-5.5 0-10-4.5-10-10V527.2c0-5.5 4.5-10 10-10s10 4.5 10 10v231.5c0 5.5-4.5 10-10 10zM192 845.6c-5.5 0-10-4.5-10-10v-39.1c0-5.5 4.5-10 10-10s10 4.5 10 10v39.1c0 5.5-4.5 10-10 10zM256 895.6c-5.5 0-10-4.5-10-10v-89.1c0-5.5 4.5-10 10-10s10 4.5 10 10v89.1c0 5.5-4.5 10-10 10zM320.1 865.6c-5.5 0-10-4.5-10-10v-59.1c0-5.5 4.5-10 10-10s10 4.5 10 10v59.1c0 5.5-4.5 10-10 10zM704.1 845.6c-5.5 0-10-4.5-10-10v-39.1c0-5.5 4.5-10 10-10s10 4.5 10 10v39.1c0 5.5-4.5 10-10 10zM768.1 895.6c-5.5 0-10-4.5-10-10v-89.1c0-5.5 4.5-10 10-10s10 4.5 10 10v89.1c0 5.5-4.5 10-10 10zM832.2 865.6c-5.5 0-10-4.5-10-10v-59.1c0-5.5 4.5-10 10-10s10 4.5 10 10v59.1c0 5.5-4.5 10-10 10z"
            fill="#5A3392"
            p-id="2862"></path>
      <path d="M421 372.5c-5.5 0-10-4.5-10-10v-38.3c0-5.5 4.5-10 10-10h38.4c5.5 0 10 4.5 10 10s-4.5 10-10 10H431v28.3c0 5.5-4.5 10-10 10z"
            fill="#FFFFFF"
            p-id="2863"></path>
      <path d="M421.4 392.5m-9.8 0a9.8 9.8 0 1 0 19.6 0 9.8 9.8 0 1 0-19.6 0Z"
            fill="#FFFFFF"
            p-id="2864"></path>
      <path d="M511.9 472.1m-55.2 0a55.2 55.2 0 1 0 110.4 0 55.2 55.2 0 1 0-110.4 0Z"
            fill="#E2FBFF"
            p-id="2865"></path>
      <path d="M511.9 537.3c-36 0-65.2-29.2-65.2-65.2s29.2-65.2 65.2-65.2 65.2 29.2 65.2 65.2-29.2 65.2-65.2 65.2z m0-110.4c-24.9 0-45.2 20.3-45.2 45.2s20.3 45.2 45.2 45.2 45.2-20.3 45.2-45.2-20.3-45.2-45.2-45.2z"
            fill="#5A3392"
            p-id="2866"></path>
      <path d="M511.9 472.1m-27.9 0a27.9 27.9 0 1 0 55.8 0 27.9 27.9 0 1 0-55.8 0Z"
            fill="#FFFFFF"
            p-id="2867"></path>
      <path d="M330.1 742.6h-66.8c-5.5 0-10-4.5-10-10s4.5-10 10-10h66.8c5.5 0 10 4.5 10 10s-4.5 10-10 10z"
            fill="#FFFFFF"
            p-id="2868"></path>
    </svg>
  </div>
</template>
<script>
export default {
  name: 'scroll-top',
  data () {
    return {
      scrollTop: 0,
      time: 0,
      dParams: 20,
      scrollState: 0
    }
  },
  computed: {
    showTop: function () {
      let value = this.scrollTop > 200 ? true : false;
      return value;
    },
  },
  mounted () {
    window.addEventListener('scroll', this.getScrollTop);
  },
  methods: {
    toTop (e) {
      if (!!this.scrollState) {
        return;
      }
      this.scrollState = 1;
      e.preventDefault();
      let distance = document.documentElement.scrollTop || document.body.scrollTop;
      let _this = this;
      this.time = setInterval(function () { _this.gotoTop(_this.scrollTop - _this.dParams) }, 10);
    },
    gotoTop (distance) {
      this.dParams += 20;
      distance = distance > 0 ? distance : 0;
      document.documentElement.scrollTop = document.body.scrollTop = window.pageYOffset = distance;
      if (this.scrollTop < 10) {
        clearInterval(this.time);
        this.dParams = 20;
        this.scrollState = 0;
      }
    },
    getScrollTop () {
      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    }
  },

}
</script>
<style scoped>
.scrollTop {
  right: 0;
  position: fixed;
  bottom: 5rem;
  cursor: pointer;
  z-index: 100;
}
</style>